<template>
	<view class="withdrawal">
		<view class="title">
			<view class="">
				总积分数：{{point}}
			</view>
		</view>
		<view class="title">
			<view class="">
				请输入提现积分数额
			</view>
			<view class="mes">
				( 输入积分自动计算提现金额 )
			</view>
		</view>
		
		<view class="fl" style="padding-top: 0;">
			<view class="text" style="margin: 0;font-weight: 600;font-size: 20px;color: #000;">
				<view class="">
					<u-form :model="form" ref="uForm" label-position="top" >
						<u-form-item label="积分数：">
							<u-input v-model="p" :type="number" :border="true"  @blur="onKeyInput(p)" />
						</u-form-item>
					</u-form>
				</view>
			</view>
			<!-- <view class="" style="color: #3DAD81;margin-top: 8rpx;">全部提现</view> -->
			</view>
		<view class="inputBox flex-r-s-c" style="border-bottom: transparent;margin-bottom: 0;">
			提现金额（ 注：{{withdrawalRatio}}积分兑换1元钱 ） ：
		</view>
		<view class="inputBox flex-r-s-c" style="margin-top: 0;padding-top: 0;">
			<view class="symbol">¥</view>
			<view class=""  style="font-size: 36rpx;">
				{{price}}
			</view>
		</view>
		<view class="fl">
			<view class="text" style="margin: 0;color: #000;font-size: 28rpx;">当前收款码</view>
			<view class="" style="color: #3DAD81;" @click="submit" >
				<u-upload ref="uUpload" :action="action" :auto-upload="false" class="up" max-count="1" @on-choose-complete="toSuccess" @on-remove="onRemove"></u-upload>
			</view>
		</view>
		<!-- <view class="" v-if="withdrawal_interdict > 0">
			<view class="text" style="font-size: 15px;margin: 4px 20px;">温馨提示:</view>
			<view class="text" style="font-size: 15px;margin: 6px 20px;">本平台提供现金提现功能，提现额度为{{withdrawal_interdict}}元，仅当前金额超过发起提现的金额才可以申请提现，剩余金额可在下次满足前述提现额度时申请提现。（提现一般3-5天内到账，您理解并同意如遇高峰，提现到账时间延长）</view>
		</view> -->
		
		
		<view class="btn1" @tap.stop="withdrawalBtn">立即提现</view>
		<view class="btn2" @tap.stop="toMoney">查看提现记录</view>
		
	</view>
</template>

<script>
	import base from '@/api/base.js'
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				balance: '',
				price: '',
				withdrawal_interdict:'',
				point:'',
				withdrawalRatio:'',
				imgUrl:'',
				p:'',
			};
		},
		onLoad(el) {
			this.balance = el.balance
			this.withdrawal_interdict = el.withdrawal_interdict
			this.getUserInfo()
			
		},
		watch: {
			p(newVal) {
				console.log(newVal,'newVal',this.p)
				let reg = /^[+]{0,1}(\d+)$/
				if(newVal && reg.test(newVal)){
					let m = this.p/this.withdrawalRatio
					// console.log(m,'m')
					this.price = this.p ?Number(m.toString().match(/^\d+(?:\.\d{0,2})?/)) : 0
				}else{
					this.price = 0
				}
				
			}
		},
		methods: {
			onRemove(index, lists) {
				this.imgUrl = ''
			},
			async toSuccess(e){
				let getavatarUrl = await this.uploadFilePromise(e[0].url)
				this.imgUrl = getavatarUrl.showUrl
			},
			uploadFilePromise(avatarUrl) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${base.imgUrl}/common/upload`, // 仅为示例，非真实的接口地址
						filePath: avatarUrl,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							// console.log(JSON.parse(res.data),'eeeeefdddddddddddddd')
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).url,
									showUrl: JSON.parse(res.data).fileName,
								})
							}, 1000)	
						},
						fail(fails) {
							console.log(fails,'fail')
						}
					});
				})
			},
			onKeyInput(e){
				console.log(this.p,'eeeeeeee',this.point)
				if(e == '') return this.$utils.toast('请输入积分数') 
				let reg = /^[+]{0,1}(\d+)$/
				if(!reg.test(e)) return this.$utils.toast('积分数为整数') 
				if(this.p > this.point) return this.$utils.toast('积分数超过最大限额') 
				let m = this.p/this.withdrawalRatio
				// console.log(m,'m')
				this.price = this.p ?Number(m.toString().match(/^\d+(?:\.\d{0,2})?/)) : 0
			},
			getRules(){
				let that = this
				that.$api.rules().then(res => {
					
					that.withdrawalRatio = res.data.data.withdrawalRatio
					// that.price = that.point/that.withdrawalRatio
					console.log(that.price,'price')
					// that.$utils.toast('提现成功')
					// setTimeout(() => {
					// 	uni.navigateBack()
					// },2000)
				})
			},
			submit() {
				this.$refs.uUpload.upload();
			},
			toMoney(){
				uni.navigateTo({
					url:'/pages/my/withdrawRecord/withdrawRecord'
				})
			},
			withdrawalBtn(){
				let that = this
				if(that.point == '') return that.$utils.toast('请输入提现积分数') 
				if(that.imgUrl == '') return that.$utils.toast('请选择收款码图片') 
				// if(that.price == '') return that.$utils.toast('超过最高提现额度') 
				// if(Number(that.price) <= Number(that.withdrawal_interdict)){
				that.$api.withdrawalAdd({
					withdrawalSource: 'POINT',
					withdrawalPrice: that.price,
					usePoint: Number(that.p),
					imgUrl: that.imgUrl
				}).then(res => {
					that.$utils.toast('提现成功')
					setTimeout(() => {
						uni.navigateBack()
					},2000)
				})
			},
			// 获取用户信息
			getUserInfo(){
				let that = this
				that.$api.getUserInfo().then(res => {
					that.point = res.data.data.point
					that.getRules()
				})
			},
		}
	}
</script>

<style lang="less">
		
	::v-deep .u-upload  u-list-item u-add-wrap{
		width: 100rpx;
		height: 100rpx;
	}
	.fl{
		display: flex;
		justify-content: space-between;
		padding: 40rpx;
	}
	.withdrawal{
		width: 100vw;
		.title{
			width: 90%;
			margin: 30rpx auto;
			font-weight: 400;
			color: #222222;
			display: flex;
			font-size: 30rpx;
		}
		.mes{
			font-size: 22rpx;
			color: #979797;
			margin: 6rpx;
		}
		.inputBox{
			width: 90%;
			margin: 30rpx auto;
			padding: 30rpx 0rpx;
			border-bottom: 1px solid #EFEFEF;
			.symbol{
				font-size: 80rpx;
				font-weight: 500;
				color: #000;
				margin-right: 20rpx;
			}
			input{
				height: 80rpx;
				font-size: 80rpx;
			}
		}
		
		.text{
			width: 80%;
			margin: 40rpx auto;
			font-size: 28rpx;
			font-weight: 400;
			color: #7F8084;
		}
		
		.btn1,.btn2{
			width: 90%;
			height: 96rpx;
			text-align: center;
			line-height: 96rpx;
			// border-radius: 96rpx;
			border-radius: 10rpx;
			background-color: #1FC064;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			position: fixed;
			left: 50%;
			bottom: 12%;
			transform: translateX(-50%);
		}
		.btn2{
			bottom: 6%;
			color: #1FC064;
			background-color: transparent;
		}
		
	}
</style>
